import React, { Component } from 'react'
import { showYTKAlert, alertDispatchFn } from "@/utils/index"
import { connect } from 'react-redux';
import { SubmitApi } from "@/request/api.js"
class DanXuan extends Component {

    state = {
        OnlyCheck: [],
        // 点击按钮是否成功
        flag: null,
        // 答案显示和隐藏
        isShowAnan: false

    }

    componentDidMount() {
        // console.log(this.props.timu);
        // console.log(JSON.parse(this.props.timu.optionContent));

        this.setState({
            OnlyCheck: JSON.parse(this.props.timu.optionContent) || []
        })
        // console.log(JSON.parse(this.props.timu.optionContent));
        // console.log(this.state.OnlyCheck);
    }

    render() {
        return (
            <div style={{ display: this.props.zuJian ? "block" : "none" }}>
                <div className="m">
                    <div className="c">
                        <span className="s-title">{this.props.tipName[this.props.timu.questionType]}</span>
                        <span className="title">{this.props.timu.title}</span>
                    </div>
                    <div className="m-text">
                        <ul>
                            {
                                this.state.OnlyCheck.map((item, index) =>
                                    <li key={index} className="li">
                                        <span onClick={this.hdClickFn.bind(this, index)} className={item.key === this.state.flag ? "iconfont icon-danxuanxiangxuanzhong" : "iconfont icon-normal"}></span>
                                        <div>
                                            <p>{item.key}、{item.value}</p>
                                            {/* <p></p> */}
                                        </div>
                                    </li>
                                )
                            }
                        </ul>
                    </div>
                </div>
                <p className="txt">此类型题目暂不支持打分，按正确记分</p>

                <div className="timu_submit" onClick={this.submitFn.bind(this, this.props.timu.id, this.props.timu.categoryCode)}>确认</div>

                <div className="timu_answer">
                    <span>答案：</span>
                    <div style={{ display: this.state.isShowAnan ? "block" : "none" }} dangerouslySetInnerHTML={{ __html: this.props.timu.answer || "<div>这是富文本的内容</div>" }}></div>
                    {/* style={{ display: xxx ? 'block' : 'none' }} */}
                </div>
            </div>
        )
    }

    submitFn(id, categoryCode) {
        // 提交答案

        SubmitApi({
            categoryCode,
            actionType: "exam_test",
            userAnswer: this.state.flag,
            actionCode: this.props.actionCode.actionCode,
            id
        }).then(res => {
            if (res.errCode === 0) {
                // 给出提示，提交成功
                showYTKAlert(this.props, "success", "提交成功");
                // 显示答案
                this.setState({
                    isShowAnswer: true
                })
            }
        })
        //点击确认提交
        // console.log("1");
        if (!this.state.flag) {
            return showYTKAlert(this.props, "warning", "请选择完再确认")
        }
        this.setState({
            isShowAnan: true
        })
    }
    hdClickFn(index) {
        console.log(this.state.OnlyCheck[index].key);
        this.setState({
            flag: this.state.OnlyCheck[index].key
        })
    }
}
const mapDispatchToProps = dispatch => {
    return {
        ...alertDispatchFn(dispatch)
    }
}

export default connect(null, mapDispatchToProps)(DanXuan)